{% extends "base.html" %}

{% block title %}通知中心 - 智能竞赛信息平台{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/notifications.css') }}">
<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
<div class="content-area">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1 class="page-title">通知中心</h1>
        <p class="page-subtitle">及时了解最新竞赛信息和校内通知</p>
    </div>

    <!-- 通知筛选和统计 -->
    <div class="notifications-header">
        <div class="notification-stats">
            <div class="stat-item">
                <span class="stat-number" id="totalNotifications">0</span>
                <span class="stat-label">总通知</span>
            </div>
            <div class="stat-item">
                <span class="stat-number" id="unreadNotifications">0</span>
                <span class="stat-label">未读</span>
            </div>
        </div>
        
        <div class="notification-actions">
            <button id="markAllRead" class="mark-read-btn">
                <iconify-icon icon="material-symbols:mark-email-read" width="16"></iconify-icon>
                全部标记为已读
            </button>
        </div>
    </div>

    <!-- 通知列表 -->
    <div class="notifications-container">
        <div id="notifications-list" class="notifications-list">
            <!-- 通知项目将通过JavaScript动态加载 -->
        </div>

        <!-- 加载状态 -->
        <div id="loading" class="loading-container">
            <div class="loading-spinner"></div>
            <p class="loading-text">加载通知中...</p>
        </div>

        <!-- 无通知提示 -->
        <div id="no-notifications" class="no-notifications" style="display: none;">
            <iconify-icon icon="material-symbols:notifications-off" width="48" style="color: #9CA3AF;"></iconify-icon>
            <h3>暂无通知</h3>
            <p>当前没有新的通知消息</p>
        </div>
    </div>
</div>

<!-- 通知功能初始化由 base.js 中的页面路由处理，无需重复调用 -->
{% endblock %}